"use client";

import { Plus } from "lucide-react";
import { CreateOrganization } from "@clerk/nextjs";
import {
  Dialog,
  DialogContent,
  DialogTrigger,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { Hint } from "../hinit";

export const NewButton = () => {
  return (
    <Dialog>
      {/* DialogTrigger 是触发对话框打开的元素 asChild 是允许用自定义的子元素作为触发器 */}
      <DialogTrigger asChild>
        <div className="aspect-square">
          <Hint label="创建组织" side="right" align="start" sideOffset={18}>
            <button className="bg-white/25 hover:opacity-100 transition h-full w-full rounded-md flex items-center justify-center opacity-60">
              <Plus className="text-white"></Plus>
            </button>
          </Hint>
        </div>
      </DialogTrigger>

      <DialogContent
        aria-describedby="dialog-description"
        className="p-0 bg-transparent border-none max-w-[480px]"
      >
        <DialogHeader>
          <DialogTitle>
            <DialogDescription></DialogDescription>
          </DialogTitle>
        </DialogHeader>
        <CreateOrganization></CreateOrganization>
        {/* <div>123</div> */}
      </DialogContent>
    </Dialog>
  );
};
